<template>
	<div>
		<div class="cl-customer-info" @click="onClick">
			<div class="cus-avatar">
				<cl-avatar class="cover" :src="cover">
					<cl-avatar slot="error" class="cover" :src="cover" />
				</cl-avatar>
				<img
					v-if="gender != null"
					class="cus-gender"
					:src="require(`@/assets/img/${gender == 2 ? 'girl' : 'boy'}.png`)"
				/>
			</div>
			<div class="pl-1 cus-info flex-column">
				<div class="cus-name flex flex-align-center" @click.stop.prevent="copyName">
					<el-tooltip content="复制" placement="top">
						<div class="ellipsis">{{ name }}</div>
					</el-tooltip>
					<div
						v-if="!isEmpty(type)"
						class="cus-type"
						:style="{ backgroundColor: constFilterFn(type, 'CUS_TYPE', 'color') }"
					>
						<template v-if="type != 4">{{ type | constFilter("CUS_TYPE") }}</template>
						<template v-else>转介绍</template>
					</div>
					<div
						v-if="makeCall && Number(haveFan)"
						v-auth="'store_make_call'"
						class="fan-type"
					>
						重粉
					</div>
					<div
						class="icon-type"
						v-if="compile"
						@click.stop.prevent="openCompile('cus_name')"
					>
						<i
							v-if="$auth('store_cusdetailindex_edit')"
							class="custom-icon custom-icon-xiugai icon-type-icon"
						/>
					</div>
				</div>
				<div v-if="mobile" class="flex flex-align-center">
					<icon-svg name="mobile" class="icon mobile" />
					<!-- <div class="ellipsis">{{ mobile | privacyPhone }}</div> -->
					<div class="ellipsis">{{ mobile }}</div>
					<div
						class="flex flex-align-center makecall"
						v-if="makeCall && !Number(haveFan)"
						@click="makeTel"
					>
						<icon-svg name="call" size="14" />
					</div>
				</div>
				<div v-if="wechat" class="flex flex-align-center">
					<icon-svg
						name="wechat"
						class="icon"
						size="14"
						:style="{ width: id_join_type == 5 ? '22px' : '14px' }"
					/>

					<el-tooltip
						class="item ellipsis"
						effect="dark"
						:content="wechat | privacyWechat"
						placement="top-start"
						v-if="is_tooltip"
					>
						<div>
							{{ wechat | privacyWechat }}
						</div>
					</el-tooltip>
					<div class="item ellipsis" v-if="!is_tooltip">
						{{ wechat | privacyWechat }}
					</div>
				</div>
				<div v-if="cusId" class="flex flex-align-center">
					<icon-svg
						name="userIcon"
						class="icon"
						size="14"
						:style="{ width: id_join_type == 5 ? '22px' : '14px' }"
					/>
					<div @click.stop.prevent="copyCusId">
						<!-- <el-tooltip
							class="item ellipsis"
							effect="dark"
							:content="cusId + ' 复制'"
							placement="top-start"
							v-if="is_tooltip"
						>
							<div >
								{{ cusId }}
							</div>
						</el-tooltip> -->
						<el-tooltip content="复制" placement="top">
							<div class="ellipsis">{{cusId.length>10? cusId.substring(0,10)+'...': cusId}}</div>
						</el-tooltip>

						<div class="item ellipsis" v-if="!is_tooltip">
							{{ cusId.length>10? cusId.substring(0,10)+'...': cusId}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { copy } from "@/cool/modules/base";
import { constFilter as constFilterFn } from "@/filters";
import { isEmpty } from "cl-admin/utils";
export default {
	name: "cl-customer",
	props: {
		avatar: String,
		name: {
			type: String,
			default: ""
		},
		gender: [Number, String],
		type: [Number, String],
		mobile: String,
		wechat: String,
		cusId: [Number, String],
		makeCall: {
			type: Boolean,
			default: false
		},
		haveFan: [Number, String],
		compile: {
			type: Boolean,
			default: false
		},
		id_join_type: [Number, String],
		is_tooltip: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		cover() {
			if (this.avatar) {
				return this.avatar;
			}
			return require(`@/assets/img/${this.gender == 2 ? "women" : "men"}.png`);
		}
	},
	methods: {
		isEmpty,
		constFilterFn,
		copyName(e) {
			copy(this.name, e);
		},
		copyCusId(e) {
			copy(this.cusId, e);
		},
		onClick() {
			this.$emit("click");
		},
		makeTel() {
			this.$emit("makeTel");
		},
		openCompile(name) {
			//name是父组件的客户名称变量名
			this.$emit("openCompile", { name: name, type: "客户名称" });
		}
	}
};
</script>
<style lang="scss" scoped>
.cl-customer-info {
	display: flex;
	// justify-content: center;
	align-items: center;
	width: 100%;
	overflow: hidden;
	.cus-avatar {
		position: relative;
		height: 50px;
		width: 50px;
		.cus-gender {
			width: 12px;
			height: 12px;
			position: absolute;
			bottom: 0;
			right: -4px;
			border: 1px solid #fff;
			border-radius: 50%;
		}
	}
	.cus-info {
		// flex: 1;
		text-align: left;
		min-width: 120px;
		line-height: 1.5;
	}
	.cus-name {
		line-height: normal;
		cursor: pointer;
		min-width: 20px;
	}
	.cus-type {
		margin-left: 6px;
		display: inline-block;
		border-radius: 16px;
		background: $color-danger;
		padding: 2px 10px;
		font-size: 12px;
		color: #fff;
		line-height: normal;
		min-width: 24px;
		text-align: center;
	}
	.fan-type {
		margin-left: 6px;
		display: inline-block;
		border-radius: 16px;
		background: $color-success;
		padding: 2px 10px;
		font-size: 12px;
		color: #fff;
		line-height: normal;
		min-width: 24px;
		text-align: center;
	}
	.icon-type {
		margin-left: 6px;
		display: inline-block;
		&-icon {
			font-size: 20px;
			color: #ababab;
		}
	}
	.icon {
		margin-right: 4px;
		&.mobile {
			width: 0.8em;
			height: 0.8em;
		}
	}
	.makecall {
		cursor: pointer;
		margin-left: 8px;
		position: relative;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #f4ecfd;
		// top: -1px;
		justify-content: center;
		align-items: center;
	}
}
</style>
